<template>
  <!-- 积分商城 -->
  <div class="box">
    <div class="top">
      <span class="iconfont icon-chevron-thin-left" @click="getlog()"></span>
      <p>积分商城</p>
    </div>
    <ul class="foot">
      <li v-for="(item, index) in shopdata" :key="index">
        <img :src="item.url" alt="" />
        <span class="bbb">{{ item.title }}</span>
        <p>
          <span class="iconfont icon-gengduo-2" style="color: #ff3f3f"></span>
          <span>{{ item.price }}积分</span>
        </p>
        <p>
          <van-button
            type="primary"
            style="width: 5rem; height: 1.5rem; margin-top: 0.5rem"
            @click="ersion(item, index)"
            >去兑换</van-button
          >
        </p>

        <!-- <button style="background:#61AE10;">去兑换</button> -->
      </li>
    </ul>
  </div>
</template>
<script>
import * as API from "@/components/api/hanjinqi.js";
export default {
  data() {
    return {
      shopdata: [],
    };
  },
  async created() {
    let res = await API.hsignlist();
    this.shopdata = res.data;
    // console.log(res.data)
  },
  methods: {
    //   点击返回
    getlog() {
      this.$router.go(-1);
    },
    //点击去兑换
    async ersion(item, index) {
      // console.log(item)
      let res=await API.getToken({uid:JSON.parse(localStorage.getItem('token')).uid})
      if (res.data.integral >= item.price) {
        // console.log("您的积分够了");
        this.$dialog.confirm({
          // title: "标题",
          message: "您的积分够了,是否确认兑换",
        })
        // 点击确认
          .then(() => {
            // on confirm
             API.conver({uid:JSON.parse(localStorage.getItem('token')).uid,list_id:item.id})

             let a=res.data.integral-item.price
             console.log(a)
             API.integer({uid:JSON.parse(localStorage.getItem('token')).uid,num:a})
            
          })
          // 点击取消
          .catch(() => {
            // on cancel
          });
      } else {
        // console.log("您的积分还不够");
        this.$dialog.confirm({
          // title: "标题",
          message: "您的积分不够了,暂时还不能兑换",
        })
          .then(() => {
            // on confirm
            
            
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  z-index: 3;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
}
.box .top {
  width: 100%;
  height: 3rem;
}
.top span {
  width: 10%;
  float: left;
  line-height: 3rem;
  margin-left: 0.3rem;
}
.top p {
  margin-left: 45%;
  line-height: 3rem;
}
.box .foot {
  width: 100%;
  height: 100%;
  margin-top: 1rem;
  padding-bottom: 4rem;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow-y: auto;
}
.foot li {
  width: 48%;
  height: 16rem;
  margin-bottom: 0.3rem;
}
.foot li img {
  width: 100%;
  height: 9rem;
  border: 1px solid #ededed;
}
.foot li .bbb {
  width: 100%;
  text-align: center;
  float: left;
  margin-top: 0.5rem;
}
.foot li p {
  width: 100%;
  float: left;
  text-align: center;
}
</style>